<!DOCTYPE html>
<html lang="en" class="md device-pixel-ratio-3 device-retina device-desktop device-windows support-position-sticky">

<head>
    <meta charset="utf-8" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <link rel="apple-touch-icon" href="favicon.ico" />
    <meta name="apple-mobile-web-app-title" content="坏坏漫画" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="referrer" content="never">
    <script type="text/javascript" src="js/debug.js"></script>
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>修改登录密码</title>
    <link href="css/main.48b4036a.css" rel="stylesheet">
    <link href="css/aui.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script type="text/javascript" src="js/template-web.js"></script>
    <script type="text/javascript" src="js/aui-toast.js"></script>
    <script type="text/javascript" src="js/aui-dialog.js"></script>
    <script type="text/javascript" src="js/config.js" charset="utf-8"></script>
    <div style="display: none;">
    </div>

    </style>

</head>

<body>
    <div id="root" style="height: 100%;">
        <div id="framework7-root" class="framework7-root">
            <div class="panel-backdrop"></div>
            <div class="panel panel-left panel-reveal">
                <div id="chapterDirectory" class="page">
                    <div class="page-content">
                        <div class="block-title">目录</div>
                        <div class="no-margin-bottom list virtual-list">
                            <ul id="leftpannel" style="height: 5667.84px;">
                                <li class="bg-color-default text-color-primary"
                                    style="height: 0.48rem; top: 0px; font-size: 110%; font-weight: 700;"><a
                                        class="item-link" href="#">
                                        <div class="item-content">

                                            <div class="item-inner">
                                                <div class="item-title">第1話-&lt;1&gt;</div>
                                            </div>
                                        </div>
                                    </a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-right panel-reveal">
                <!-- 侧边栏 -->
                <div class="page" id="right-page">
                    <script>
                        $("#right-page").load("right-page.html");
                    </script>
                </div>
            </div>
            <div class="view view-main">

                <div class="view view-main">
                    <div class="page page-current" data-name="personalResetPassword">
                        <div class="navbar">
                            <div class="navbar-inner sliding">
                                <div class="left"><a class="icon-only link icon-only back" href="/setting.html"><i
                                            class="icon icon-back"></i></a></div>
                                <div class="title">更改密码</div>
                            </div>
                        </div>
                        <div class="page-content">
                            <div class="list no-hairlines">
                                <ul>
                                    <li class="">
                                        <div class="item-content item-input">
                                            <div class="item-media"><i
                                                    class="padding-vertical-sm padding-left-sm icon material-icons">lock</i>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-floating-label">原密码</div>
                                                <div class="item-input-wrap">
                                                    <input type="password" name="password" class="passInput"
                                                        id="password" placeholder="当前登录密码">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="">
                                        <div class="item-content item-input">
                                            <div class="item-media"><i
                                                    class="padding-vertical-sm padding-left-sm icon material-icons">lock</i>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-floating-label">新密码</div>
                                                <div class="item-input-wrap"><input type="password" name="newpwd"
                                                        class="passInput" id="newpwd"
                                                        placeholder="新登录密码,4位以上字母或数字"><span
                                                        class="input-clear-button"></span></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="">
                                        <div class="item-content item-input">
                                            <div class="item-media"><i
                                                    class="padding-vertical-sm padding-left-sm icon material-icons">lock</i>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-floating-label">确认新密码</div>
                                                <div class="item-input-wrap"><input type="password" name="newpwdck"
                                                        class="passInput" id="newpwdck" placeholder="再次输入新密码"><span
                                                        class="input-clear-button"></span></div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="reader-login-captcha-item">
                                        <div class="item-content item-input">
                                            <div class="item-media"><i
                                                    class="padding-vertical-sm padding-left-sm icon material-icons">sms</i>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-floating-label">验证码</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" name="vfycode" class="vCodeInput" id="vfycode"
                                                        placeholder="验证码">
                                                    <span class="input-clear-button"></span>
                                                    <a id="verifyImg2" class="reader-login-captcha-button button" href="javascript:void(0)">
                                                        <img id="verifyImg"src="" style="height: -0.43rem;width: 1rem;"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>


                                </ul>
                            </div>
                            <div class="list no-hairlines">
                                <ul>
                                    <li class="text-align-center"><a class="item-link list-button btn-submit"
                                            data-tab="false">提 交</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="framework7-modals"></div>
            <div class="actions-backdrop"></div>
            <div class="dialog-backdrop"></div>
            <div class="dialog dialog-buttons-1 dialog-buttons-vertical reader-copy-modal modal-in"
                style="display: none; margin-top: -372px;">
                <div class="dialog-inner">
                    <div class="dialog-title"></div>
                    <div class="dialog-text"></div>
                    <input id="foo" type="link" value="" readonly="">
                </div>
                <div class="dialog-buttons">
                    <span class="dialog-button dialog-button-bold text-align-center text-color-primary"
                        data-clipboard-action="copy" data-clipboard-target="#foo">复制链接</span>
                </div>
            </div>
            <div class="popover-backdrop"></div>
            <div class="toast">
                <div class="toast-content">
                    <div class="toast-icon"></div>
                    <div class="toast-text"></div>
                    <a class="toast-button"></a>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="js/yymh.js"></script>
    <script src="js/clipboard.min.js"></script>

    <script type="text/javascript">
        getImageCode();
        function getImageCode(){
            $.ajax({
                url: baseApi +"/verify/getImageCode",
                type: 'post',
                headers:{'authToken':localStorage.getItem("authToken")},
                success: function (data) {
                    //图片链接（base64） ;
                    $("#verifyImg").attr("src","data:image/png;base64,"+data);
                },
                error: function () {
                    alert('error!');
                }
            })
        }
        //刷新验证码
        $('#verifyImg2').click(function(){
            getImageCode();
        })
    </script>

    <script type="text/javascript">
        $().ready(function () {
            // 修改
            $(".btn-submit").click(function () {
                var password= $("#newpwd").val();
                var newpwdck = $("#newpwdck").val();
                var oldpwd = $("#password").val();
                var vfycode = $("#vfycode").val();
                if (!password) {
                    layer.msg("请输入账户原密码！"); return;
                }
                if (!newpwd) {
                    layer.msg("请输入新的密码！"); return;
                }
                if (!newpwdck) {
                    layer.msg("请再次输入新的密码！"); return;
                }
                if (password != newpwdck) {
                    layer.msg("俩次密码输入不一致"); return;
                }

                if (!vfycode) {
                    layer.msg("请输入验证码"); return;
                }

                $.ajax({
                    url: baseApi +"/modifyPwd/WithVerifyCode",
                    type: 'post',
                    data: {'oldpwd':oldpwd,'password':password,'vfycode':vfycode},
                    headers:{'authToken':localStorage.getItem("authToken")},
                    success: function (data) {
                        layer.msg(data.msg);
                        if (data.code == 0) {
                            $('.btn-submit').addClass("disabled");
                        setTimeout('jump_url()', 3000);
                        }
                    }
                })
                // $('.btn-submit').removeClass("disabled");
            });
        });

        $("input").focus(function () {
            $(this).addClass('input-focused');
            $(this).parent().parent().parent().addClass('item-input-focused');

        });
        $("input").blur(function () {
            if ($(this).val() != '') {
                $(this).addClass('input-with-value');
                $(this).parent().parent().parent().addClass('item-input-with-value');
            }
            $(this).removeClass('input-focused');
            $(this).parent().parent().parent().removeClass('item-input-focused');

        });

        function jump_url() {
            window.location.href = "/user.html";
        }
    </script>


</body>

</html>